<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
            round
            class="avatar"
            :src="userInfo.photo"
            @click="changePhotoFn"
          />
          <!-- file 选择框 -->
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="onFileChange"
          />
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="userInfo.name"
        @click="changeName"
      />
      <van-cell
        title="生日"
        is-link
        :value="userInfo.birthday"
        @click="changeBirth"
      />
    </van-cell-group>
    <!-- 点击名称,出现的弹窗 -->
    <van-dialog
      v-model="show"
      title="修改名称"
      show-cancel-button
      :beforeClose="beforeCloseFn"
    >
      <van-field
        v-model="value"
        input-align="center"
        placeholder="请输入用户名"
        v-fofo
      />
    </van-dialog>
    <!-- 点击生日,弹出的弹窗 -->
    <van-popup
      v-model="popShow"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择生日"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel='popShow=false'
        @confirm='confirmFn'
      />
    </van-popup>
  </div>
</template>

<script>
import {
  getUserProfileInfoAPI,
  changeUserPhotoAPI,
  updateUserInfoAPI
} from '@/api'
// import { Notify } from 'vant'
import { myNotify } from '../../utils/Notify'
import moment from 'moment'
export default {
  data () {
    return {
      userInfo: {}, // 用户信息对象
      show: false, // 控制修改名字弹出层的显示与否
      value: '', // 修改名字的输入框内容
      popShow: false, // 控制pop弹出窗的显示与否
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date()
    }
  },
  async created () {
    const res = await getUserProfileInfoAPI()
    this.userInfo = res.data.data
  },
  methods: {
    // 点击图片
    changePhotoFn () {
      this.$refs.iptFile.click()
    },
    // 选择图片文件
    async onFileChange (e) {
      const fd = new FormData()
      fd.append('photo', e.target.files[0])
      await changeUserPhotoAPI({ formObj: fd }).then((res) => {
        this.userInfo.photo = res.data.data.photo
      })
    },
    // 点击名称事件
    changeName () {
      // 让修改名称的盒子弹出
      this.show = true
      // 数据回填
      this.value = this.userInfo.name
    },
    // 点击关闭修改名称弹窗前,触发的函数
    async beforeCloseFn (action, done) {
      if (action === 'cancel') {
        done()
      } else if (action === 'confirm') {
        // 首先正则判断输入框的内容是否符合要求
        if (/^[\u4E00-\u9FA5A-Za-z0-9]{1,7}$/.test(this.value)) {
          done()
          myNotify({ type: 'success', message: '修改名称成功哦' })
          this.userInfo.name = this.value
          // 发送请求
          await updateUserInfoAPI({ userName: this.value })
        } else {
          done(false)
          myNotify({ type: 'warning', message: '名称必须为1~7位数字/中英文' })
        }
      }
    },
    // 修改生日事件函数
    changeBirth () {
      // 让弹窗显示
      this.popShow = true
      // 数据回填
      this.currentDate = new Date(this.userInfo.birthday)
    },
    // 选择生日后,点击确定事件
    async  confirmFn () {
      const birth = moment(this.currentDate).format('YYYY-MM-DD')
      // 发送请求
      await updateUserInfoAPI({ birthday: birth })
      this.userInfo.birthday = birth
      // 关闭弹窗
      this.popShow = false
    }
  },
  name: 'UserEdit'
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
